<template>
  <div class="container">
    <TopBar class="top-bar base" />
    <div class="content">
      <div class="menu-layer">
<!--        <LeftMenu class="section left-menu" />-->
        <Middle class="section middle" />
<!--        <RightMenu class="section right-menu" />-->
      </div>
<!--      <div class="map-layer">-->
<!--        <MainMap />-->
<!--      </div>-->
    </div>
  </div>
</template>

<script lang="ts" setup>
import LeftMenu from "@home/pages/jcxm/LeftMenu/LeftMenu.vue"
import TopBar from "@home/pages/jcxm/TopBar/TopBar.vue"
import Middle from "@home/pages/jcxm/Middle/Middle.vue"
import RightMenu from "@home/pages/jcxm/RightMenu/RightMenu.vue"
import MainMap from "@home/pages/jcxm/HomePage/mainMap.vue"
</script>

<style lang="less">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: black;
}

.top-bar {
  height: 8%;
  background-size: 100% 100%;
  z-index: 2;
}

.content {
  height: 92%;
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden; /* 防止溢出 */
}

.map-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* 下层背景设置较低的 z-index */
}

.menu-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 2; /* 上层内容设置较高的 z-index */
  //padding: 10px;
  //pointer-events: none;
}

.section {
  height: 100%;
}

.left-menu {
  flex: 0 0 20%; /* 左侧占15% */
  background-size: 100% 100%;
  pointer-events: auto;
}

.middle {
  //flex: 0 0 60%; /* 中间占70% */
  flex: 0 0 100%; /* 中间占70% */
}

.right-menu {
  flex: 0 0 20%; /* 右侧占15% */
  background-size: 100% 100%;
  pointer-events: auto;
}
</style>
